<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/xbk.css">
</head>

<body>

    <div class="left">
        <div class="top">
            <ul class="top-left">
                <li class="item"
                    style="margin-left:20px;width: 35px;height: 35px;background: url(img/1.svg)no-repeat 0 0 / 100% 100%;margin-top: 25px;">
                </li>
                <li class="item">门店</li>
                <li class="item">我的账户</li>
                <li class="item">菜单</li>
            </ul>
            <div class="items"></div>
        </div>
        <div class="bottom">
            <div class="bottom-a">
                <div class="bottom-b">心情惬意，来杯咖啡吧☕ </div>
                <div class="bottom-c">
                    <div class="bottom-d"> </div>
                    <div class="bottom-f">登陆</div>
                    <div class="bottom-g">注册</div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="img">
            <div class="img-a"></div>
        </div>
        <div class="img-1">
            <li class="img-2"></li>
            <li class="img-3"></li>
            <li class="img-4"></li>
        </div>
        <div class="logo">
            <div class="logo-a">
                <div class="logo-b">
                    <div class="logo-c">星享俱乐部</div>
                    <div class="logo-d">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。
                        <span style="color:rgb(153, 126, 77);cursor:pointer;">了解更多 ›</span>
                    </div>
                    <div class="logo-e">
                        <div class="logo-f">注册</div>
                        <div class="logo-g">登陆</div>
                        <div></div>
                    </div>
                </div>

                <div class="logo-1"> </div>
            </div>
        </div>
        <div class="tear">
            <div class="tear-a">星巴克精选</div>
            <div class="tear-b">在星巴克天猫旗舰店发现更多咖啡心意</div>
            <ul class="tear-1">
                <li class="tear-2">
                    <div class="tear-3"></div>
                    <div class="tear-4">会员星礼包</div>
                    <div class="tear-5">星享卡新升级
                        更多心意好礼</div>
                    <div class="tear-6">了解更多</div>
                </li>
                <li class="tear-2">
                    <div class="tear-3"></div>
                    <div class="tear-4">会员星礼包</div>
                    <div class="tear-5">星享卡新升级
                        更多心意好礼</div>
                    <div class="tear-6">了解更多</div>
                </li>
                <li class="tear-2">
                    <div class="tear-3"></div>
                    <div class="tear-4">会员星礼包</div>
                    <div class="tear-5">星享卡新升级
                        更多心意好礼</div>
                    <div class="tear-6">了解更多</div>
                </li>
                <li class="tear-2">
                    <div class="tear-3"></div>
                    <div class="tear-4">会员星礼包</div>
                    <div class="tear-5">星享卡新升级
                        更多心意好礼</div>
                    <div class="tear-6">了解更多</div>
                </li>
            </ul>
        </div>
        <div class="conmon">
            <div class="conmon-a">1912 派克街 | 咖啡星讲堂</div>
            <div class="conmon-b">了解更多星巴克咖啡文化</div>
            <div class="conmon-c">
                <div class="dots"></div>
                <li class="conmon-1">
                    <div class="conmon-2">
                            <div class="conmon-4"> 咖啡知识</div>
                    </div>
                    <div class="conmon-3">咖啡的起源与培根</div>
                   
                </li>
                <li class="conmon-1">
                    <div class="conmon-2">
                            <div class="conmon-4"> 咖啡知识</div>
                    </div>
                    <div class="conmon-3">咖啡的起源与培根</div>
                </li>

                <li class="conmon-1">
                    <div class="conmon-2">
                            <div class="conmon-4"> 咖啡知识</div>
                    </div>
                    <div class="conmon-3">咖啡的起源与培根</div>
                </li>
                <li class="conmon-1">
                    <div class="conmon-2">
                            <div class="conmon-4"> 咖啡知识</div>
                    </div>
                    <div class="conmon-3">咖啡的起源与培根</div>
                </li>
            </div>
        </div>
    </div>

</body>

</html>